<template>
    <el-dialog
            title="修改用户"
            :visible.sync="message"
            width="40%"
            :show-close="false"
            @close="resetEditInfo"
            >
        <span>
            <el-form ref="editFormRef" :model="editUserInfo" label-width="80px" :rules="editUserRules">
                <el-form-item label="用户" prop="username">
                    <el-input v-model="editUserInfo.username" disabled></el-input>
                </el-form-item>
                 <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editUserInfo.email"></el-input>
                </el-form-item>
                 <el-form-item label="手机" prop="mobile">
                    <el-input v-model="editUserInfo.mobile"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="editVisible">取 消</el-button>
    <el-button type="primary" @click="editUser">确 定</el-button>
  </span>
    </el-dialog>
</template>

<script>
    import {putEditUserInfo} from "../../../network/users";

    export default {
        name: "EditUserDialog",
        props:{
            message:{
                type:Boolean,
                default(){
                    return false
                }
            },
            editUserInfo:{
                type:Object,
                default() {
                    return {};
                }
            }
        },
        data(){
            //手机号校验
            const mobileCheck = (rule,value,cb) => {
                const regExp = /^1[3456789]\d{9}$/;
                if(regExp.test(value)){
                    return cb();
                }
                cb(new Error('请输入正确的手机号'));
            };
            return{
                editUserRules:{
                    email:[
                        {type:"email",message: '请输入正确的邮箱', trigger: 'blur'},
                    ],
                    mobile:[
                        //自定义校验规则
                        {validator:mobileCheck,trigger:'blur'}
                    ]
                }
            }
        },
        methods:{
            editVisible(){
                this.$bus.$emit('editDialog')
            },

            //提交修改后的用户信息
            editUser(){
                this.$refs.editFormRef.validate(valid => {
                    if(valid){
                        //发送网络请求
                        putEditUserInfo(this.editUserInfo).then(res => {
                            // console.log(res);
                            if(res.data.meta.status === 200){
                                this.$message.success(res.data.meta.msg);
                                this.$bus.$emit('getUserB')
                            }else {
                                this.$message.warning(res.data.meta.msg)
                            }
                        });
                        this.$bus.$emit('editDialog')
                    }else{this.$message.error('请填写正确信息')}
                })
            },
            //重置表单信息
            resetEditInfo(){
                this.$refs.editFormRef.resetFields()
            }

        }
    }
</script>

<style scoped>

</style>